<!DOCTYPE html>
<html>
    <head>
        <title>我的待办事项</title>
        <link rel="stylesheet" href="font/iconfont.css" />
        <link rel="stylesheet" href="lxk.css" />
    </head>
    <body>
        <header class="page-header">
            <h1>我的待办清单</h1>
        </header>
        <main class="container">
            <nav class="tab-nav">
                <button class="tab-btn active">待办事项</button>
                <button class="tab-btn">已完成</button>
            </nav>

            <section class="search-section">
                <div class="search-wrapper">
                    <input type="text" class="search-input" placeholder="搜索待办事项...">
                    <span class="search-icon"></span>
                </div>
            </section>

            <section id="todo" class="tab-content active">
                <ul class="task-list">
                    <li class="task-item">
                        <div class="task-content">
                            <h3>完成项目文档</h3>
                            <p>截止日期：2025-01-21</p>
                        </div>
                        <div class="task-actions">
                            <button class="action-btn complete-btn">
                                <span class="iconfont icon-duigoux"></span>
                                <span class="btn-text">完成</span>
                            </button>
                            <button class="action-btn delete-btn">
                                <span class="btn-icon">x</span>
                                <span class="btn-text">删除</span>
                            </button>
                        </div>
                    </li>
                </ul>
                <ul class="task-list">
                    <li class="task-item">
                        <div class="task-content">
                            <h3>团队会议</h3>
                            <p>下午两点开始</p>
                        </div>
                        <div class="task-actions">
                            <button class="action-btn complete-btn">
                                <span class="iconfont icon-duigoux"></span>
                                <span class="btn-text">完成</span>
                            </button>
                            <button class="action-btn delete-btn">
                                <span class="btn-icon">x</span>
                                <span class="btn-text">删除</span>
                            </button>
                        </div>
                    </li>
                </ul>
                <ul class="task-list">
                    <li class="task-item">
                        <div class="task-content">
                            <h3>准备周报</h3>
                            <p>准备本周工作内容</p>
                        </div>
                        <div class="task-actions">
                            <button class="action-btn complete-btn">
                                <span class="iconfont icon-duigoux"></span>
                                <span class="btn-text">完成</span>
                            </button>
                            <button class="action-btn delete-btn">
                                <span class="btn-icon">x</span>
                                <span class="btn-text">删除</span>
                            </button>
                        </div>
                    </li>
                </ul>
                <ul class="task-list">
                    <li class="task-item">
                        <div class="task-content">
                            <h3>前端性能优化</h3>
                            <p>优化移动端交互</p>
                        </div>
                        <div class="task-actions">
                            <button class="action-btn complete-btn">
                                <span class="iconfont icon-duigoux"></span>
                                <span class="btn-text">完成</span>
                            </button>
                            <button class="action-btn delete-btn">
                                <span class="btn-icon">x</span>
                                <span class="btn-text">删除</span>
                            </button>
                        </div>
                    </li>
                </ul>
                <ul class="task-list">
                    <li class="task-item">
                        <div class="task-content">
                            <h3>代码评审</h3>
                            <p>评审新功能代码</p>
                        </div>
                        <div class="task-actions">
                            <button class="action-btn complete-btn">
                                <span class="iconfont icon-duigoux"></span>
                                <span class="btn-text">完成</span>
                            </button>
                            <button class="action-btn delete-btn">
                                <span class="btn-icon">x</span>
                                <span class="btn-text">删除</span>
                            </button>
                        </div>
                    </li>
                </ul>
            </section>
        </main>
        <footer>
            <div class="footer-container">
                <div class="footer-links">
                    <h3>快捷链接</h3>
                    <ul>
                        <li><a href="#about">关于待办清单</a></li>
                        <li><a href="#guidelines">使用指南</a></li>
                        <li><a href="#privacy">隐私政策</a></li>
                        <li><a href="#contact">联系我们</a></li>
                    </ul>
                </div>
                <div class="footer-copyright">
                    <p>&copy; 2024我的待办清单-保留所有权利</p>
                </div>
            </div>
        </footer>
        
    </body>
</html>
